<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
  <link rel="shortcut icon" href="/static/favicon.ico">
  <link rel="manifest" href="/static/site.webmanifest">
  <link rel=stylesheet type=text/css href="/static/css/shared.css">
  <link rel=stylesheet type=text/css href="/static/css/slider.css">
  <link rel=stylesheet type=text/css href="/static/css/range.css">
  <link rel="stylesheet" href="/static/vendor/bootswatch-slate/css/bootstrap-slate.min.css">
  <link rel=stylesheet type=text/css href="/static/css/dark-cow/theme.css">
  <link rel="stylesheet" href="/static/vendor/fontawesome/css/all.css">
  <link rel="stylesheet" href="/static/vendor/bootstrap-toggle/css/bootstrap-toggle.min.css">
  <link rel="stylesheet" href="/static/vendor/dropzone/css/basic.min.css" />
  <link rel="stylesheet" href="/static/vendor/dropzone/css/dropzone.min.css" />
  <link rel="stylesheet" href="/static/css/dark-cow/simplemde-theme-dark.min.css">
  <script src="/static/vendor/socketio/js/socket.io.js"></script>
  <script src="/static/vendor/jquery/js/jquery-3.3.1.min.js"></script>
  <script src="/static/vendor/lazyload/js/lazyload.min.js"></script>
  <script src="/static/vendor/easymde/js/easymde.min.js"></script>
  
  
  {% block head %}
  
  {% endblock %}
  
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" href="/">
      <img src="{{sysSettings.systemLogo}}" width="34" height="34" class="d-inline-block align-top" alt="">
      <span class="navbar-title">{{sysSettings.siteName}}</span>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    
    <div class="collapse navbar-collapse" id="navbarColor01">
      <ul class="navbar-nav ml-auto">
        <form class="form-inline my-2 my-lg-0 mr-auto" style="height:14px;" action="/search" method="post">
          <input class="form-control search" name="term" type="search" placeholder="&#xf002; Search..." aria-label="Search" style="height:16px;font-weight: 900;font-family: 'Font Awesome 5 Free', Arial, Sans-serif;" size="24">
        </form>
        <li class="nav-item">
          <a class="nav-link" href="/channel">Channels</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/topic">Topics</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/streamers">Streamers</a>
        </li>
        {% if current_user.is_authenticated == False %}
        <li class="nav-item">
          <a class="nav-link" href="/login"><i class="fas fa-sign-in-alt"></i> Login</a>
        </li>
        {% if allowRegistration %}
        <li class="nav-item">
          <a class="nav-link" href="/register"><i class="far fa-id-card"></i> Register</a>
        </li>
        {% endif %}
        {% else %}
        <li class="nav-item px-2 d-block d-lg-none">
          <a class="nav-link zoom" href="/notifications"><i class="fas fa-bell"></i> Notifications {% if notifications|count > 0 %}<span id="notificationCountMobile" class="badge badge-danger">{{notifications|count}}</span>{% endif %}</a>
        </li>
        <li class="nav-item dropdown pl-2 pr-1 d-none d-lg-block">
          <a class="nav-link zoom" href="#" id="navbarDropdownNotificationLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <b><i class="fas fa-bell"></i></b> {% if notifications|count > 0 %}<span class="badge badge-danger" id="notificationCountNav">{{notifications|count}}</span>{% endif %}
          </a>
          <ul class="dropdown-menu notificationDropdownMenu shadow">
            <li class="head text-light bg-dark">
              <div class="row">
                <div class="col-lg-12 col-sm-12 col-12">
                  <span>Notifications <span class="badge badge-light" id="notificationCountMenu">{{notifications|count}}</span></span>
                  <a href="javascript:void(0);" class="float-right text-light" onclick="clearAllNotifications(); return false;">Mark all as read</a>
                </div>
              </div>
            </li>
            <div class="notificationBody">
              {% if notifications != [] %}
              {% for entry in notifications %}
              <li class="notification-box" id="notification-{{entry.notificationID}}">
                <div class="row">
                  <div class="col-lg-1 col-sm-1 col-1">
                    <img width="35" height="35" class="userPhoto rounded notificationImg" src="{{entry.image}}" onerror="this.src='/static/img/user2.png';">
                  </div>
                  <div class="col-lg-11 col-sm-11 col-11">
                    <span class="float-right"><a href="javascript:void(0);" onclick="clearNotification('{{entry.notificationID}}'); return false;"><i class="fas fa-times"></i></a></span>
                    <a href="{{entry.link}}"><div>{{entry.message}}</div></a>
                    <small class="">{{entry.timestamp|normalize_date}}</small>
                  </div>
                </div>
              </li>
              {% endfor %}
              {% endif %}
              <li class="notification-box" id="notification-empty" {% if notifications != [] %} style="display:none;" {% endif %}>
                <div class="row">
                  <div class="col-lg-12 col-sm-12 col-12">
                    <div>No New Notifications</div>
                  </div>
                </div>
              </li>
            </div>
            
            <li class="footer bg-dark text-center">
              <a href="/notifications" class="text-light">View All</a>
            </li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link profile-image dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <img width="34" height="34" class="userphoto" src="/images/{{current_user.pictureLocation}}" onerror="this.src='/static/img/user2.png';"> {{current_user.username}}
          </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
            {% if current_user.has_role('Admin') %}
            <a class="dropdown-item" href="/settings/admin"><i class="fas fa-server"></i> Admin</a>
            {% endif %}
            {% if current_user.has_role('Streamer') %}
              <a class="dropdown-item" href="/settings/channels"><i class="fas fa-video"></i> My channels</a>
            {% if sysSettings.allowUploads == True %}
              {% if current_user.has_role('Uploader') %}
                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#uploadModal"><i class="fas fa-upload"></i> Upload video</a>
              {% endif %}
            {% endif %}
            <a class="dropdown-item" href="/settings/api"><i class="fas fa-key"></i> API keys</a>
            {% endif %}
            <a class="dropdown-item" href="/settings/user/subscriptions"><i class="fas fa-star"></i> Subscriptions</a>
            <a class="dropdown-item" href="/settings/user"><i class="fas fa-cogs"></i> Settings</a>
            <a class="dropdown-item" href="https://openstreamingplatform.com/support"><i class="fas fa-question-circle"></i> Help</a>
            <a class="dropdown-item" href="#" data-toggle="modal" data-target="#aboutModal"><i class="fas fa-info-circle"></i> About</a>
            <a class="dropdown-item" href="/logout"><i class="fas fa-sign-out-alt"></i> Log out</a>
          </div>
        </li>
        {% endif %}
      </ul>
    </div>
  </nav>
  
  <div style="position: absolute; top: 65px; right: 70px;z-index:9999999;" id="toastDiv">
    {%- with messages = get_flashed_messages(with_categories=true) -%}
    {% if messages %}
    {% for category, message in messages %}
    <div class="toast shadow" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="true" data-delay="30000" style="width:250px;">
      <div class="toast-header text-white bg-dark">
        <strong class="mr-auto">
          <span class="toast-box {% if category == 'message' %}gray {% elif category == 'error'%}red {% elif category == 'success' %}green {% endif %}"> </span>
          <span style="margin-left:5px;">{{category|upper}}</span>
        </strong>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body m-3">
        {{message}}
      </div>
    </div>
    {% endfor %}
    {% endif %}
    {%- endwith %}
  </div>
  
  <!-- Modal -->
  <div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="aboutModalTitle" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="moveModalTitle">About OSP</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="text-center">
            <img src="/static/img/logo.png">
            <p class="pt-4">
              Open Streamin Platform Version <b>{{sysSettings.version}}</b>
            </p>
          </div>
          <div>
            <table>
              <tbody>
                <tr>
                  <td><i class="pr-2 fas fa-globe-europe"></i> Website</td>
                  <td><a href="https://openstreamingplatform.com">openstreamingplatform.com</a></td>
                </tr>
                <tr>
                  <td><i class="pr-2 fab fa-gitlab"></i> Code repository</td>
                  <td><a href="https://gitlab.com/Deamos/flask-nginx-rtmp-manager/">Deamos/flask-nginx-rtmp-manager/</a></td>
                </tr>
                <tr>
                  <td><i class="pr-2 fab fa-reddit"></i> Reddit</td>
                  <td><a href="https://reddit.com/r/openstreamingplatform">/r/openstreamingplatform</a></td>
                </tr>
                <tr>
                  <td><i class="pr-2 fab fa-discord"></i> Discord</td>
                  <td><a href="https://discord.gg/Jp5rzbD">Open Streaming Platform</a></td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="text-center">
            <p class="pt-4">
              <i class="fab fa-osi"></i><br>
              MIT License
            </p>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="uploadModalTitle" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <form id="uploadform" action="/upload/video-details" enctype=multipart/form-data method="post">
          <div class="modal-header bg-dark">
            <h5 class="modal-title text-white" id="moveModalTitle">Upload a video</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="canceluploads()">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <label for="videoTitle">Title</label>
              <input class="form-control" id="videoTitle" name="videoTitle">
            </div>
            <div class="form-group">
              <label for="uploadToChannelID">Channel</label>
              <select name="uploadToChannelID" class="form-control" required>
                {% for chan in ownedChannels %}
                <option value="{{chan.id}}">{{chan.channelName}}</option>
                {% endfor %}
              </select>
            </div>
            <div class="form-group">
              <label for="uploadTopic">Topic</label>
              <select name="uploadTopic" class="form-control" required>
                {% for topic in uploadTopics %}
                <option value="{{topic.id}}">{{topic.name}}</option>
                {% endfor %}
              </select>
            </div>
            
            <span>Thumbnail <span id="thumbnailuploadstatus"></span></span>
            <!-- hidden dropzone -->
            <div class="dropzone" id="thumbnaildropper" enctype="multipart/form-data"></div>
            <div class="form-group row">
              <div class="col-2 my-auto">
                <button id="thumbnailuploadbutton" type="button" class="btn btn-sm btn-primary">Browse</button>
              </div>
              <div class="col-10">
                <input class="form-control pl-2 form-control" id="thumbnailFilenameDisplay" name="thumbnailFilename" placeholder="Filename" disabled />
                <input type="hidden" class="form-control pl-2 form-control" id="thumbnailFilename" name="thumbnailFilename" placeholder="Filename" />
              </div>
            </div>
            
            <div class="progress progress-striped active mb-2" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
              <div id="thumbnailuploadprogress" class="progress-bar progress-bar-success bg-info" style="color: white; width:0%;" data-dz-uploadprogress></div>
            </div>
            
            <span>Video file <span id="videouploadstatus"></span></span>
            <!-- hidden dropzone -->
            <div class="dropzone" id="videodropper" enctype="multipart/form-data"></div>
            <div class="form-group row">
              <div class="col-2 my-auto">
                <button id="videouploadbutton" type="button" class="btn btn-sm btn-primary">Browse</button>
              </div>
              <div class="col-10">
                <input class="form-control pl-2 form-control" id="videoFilenameDisplay" name="videoFilename" placeholder="Filename" disabled />
                <input type="hidden" class="form-control pl-2 form-control" id="videoFilename" name="videoFilename" placeholder="Filename" />
              </div>
            </div>
            
            <div class="progress progress-striped active mb-2" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
              <div id="videouploadprogress" class="progress-bar progress-bar-success bg-info" style="color: white; width:0%;" data-dz-uploadprogress></div>
            </div>
            
            <div class="form-group">
              <label for="videoDescription">Video description</label>
              <textarea class="form-control" id="videoDescription" name="videoDescription" rows="3"></textarea>
            </div>
            
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="canceluploads()">Cancel</button>
            <button id="uploadbutton" type="submit" class="btn btn-success" disabled>Upload</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  {% if sysSettings.maintenanceMode == True %}
  <div class="alert alert-secondary m-2" role="alert">
    Server is in Maintenance Mode!
  </div>
  {% endif %}
  
  {% block body %}
  
  {% endblock %}
  
  <script src="/static/vendor/jquery/js/jquery-3.3.1.min.js"></script>
  <script src="/static/vendor/popper/js/popper.min.js"></script>
  <script src="/static/vendor/bootstrap/js/bootstrap.min.js"></script>
  <script src="/static/vendor/bootstrap-toggle/js/bootstrap-toggle.min.js"></script>
  <script src="/static/vendor/dropzone/js/dropzone.min.js"></script>
  <script src="/static/vendor/listjs/js/list.min.js"></script>
  <script type="text/javascript">
    Dropzone.autoDiscover = false;     
  </script>
  {% block scripts %}
  
  {% endblock %}
    <script>

    function setCookie(name,value,days) {
      var expires = "";
      if (days) {
          var date = new Date();
          date.setTime(date.getTime() + (days*24*60*60*1000));
          expires = "; expires=" + date.toUTCString();
      }
      document.cookie = name + "=" + (value || "")  + expires + "; path=/";
    }

    function getCookie(name) {
      var nameEQ = name + "=";
      var ca = document.cookie.split(';');
      for(var i=0;i < ca.length;i++) {
          var c = ca[i];
          while (c.charAt(0)==' ') c = c.substring(1,c.length);
          if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
      }
      return null;
    }
    function eraseCookie(name) {
      document.cookie = name + '=; Max-Age=-99999999;';
    }

    </script>
  
  <scripts>
    <script>
      var uploadmde = new EasyMDE({ autoDownloadFontAwesome: false, spellChecker: false, element: document.getElementById("videoDescription") });
    </script>
  </scripts>
  
  <script type="application/javascript">
    function s4() {
      return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
    }
    
    videofilename = s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
    
    function videouploadsocket() {
      var conn_options = {
        'sync disconnect on unload': true
      };
      var socket = io();
      
      socket.on('disconnect', function () {
        socket.emit('cancelUpload', { data: videofilename });
      });
      window.addEventListener("beforeunload", function (e) {
        socket.emit('cancelUpload', { data: videofilename });
        return null;
      });
    }
    
    var thumbnaildropper = new Dropzone(
    '#thumbnaildropper', {
      acceptedFiles: 'image/png',
      previewTemplate: '<div></div>',
      clickable: '#thumbnailuploadbutton',
      addRemoveLinks: true,
      paramName: 'file',
      chunking: true,
      forceChunking: true,
      url: '/upload/video-files',
      maxFilesize: 5, // megabytes
      chunkSize: 1000000 // bytes
    }
    );
    thumbnaildropper.on('sending', function (file, xhr, formData) {
      formData.append('ospfilename', videofilename + '.png');
    });
    thumbnaildropper.on("uploadprogress", function (file, progress, bytesSent) {
      progress = Math.floor(bytesSent / file.size * 100);
      $('#thumbnailuploadprogress').width(progress + "%");
      document.getElementById('thumbnailuploadprogress').innerHTML = document.getElementById('thumbnailuploadprogress').innerHTML = '<b>' + progress + '%</b>';
    });
    thumbnaildropper.on("addedfile", function (file) {
      document.getElementById('thumbnailFilename').value = videofilename + '.png';
      document.getElementById('thumbnailFilenameDisplay').value = file.name;
      videouploadsocket();
      
    });
    thumbnaildropper.on("success", function (file) {
      document.getElementById('thumbnailuploadstatus').innerHTML = document.getElementById('thumbnailuploadstatus').innerHTML = ' <i class="fas fa-check">';
        document.getElementById('thumbnailuploadprogress').innerHTML = document.getElementById('thumbnailuploadprogress').innerHTML = 'Upload complete';
        
      });
      thumbnaildropper.on('error', function (file, response) {
        document.getElementById('thumbnailuploadstatus').innerHTML = document.getElementById('thumbnailuploadstatus').innerHTML = ' <i class="fas fa-exclamation-triangle"></i>';
        document.getElementById('thumbnailFilenameDisplay').value = 'Error: ' + response;
      });
      
      var videodropper = new Dropzone(
      '#videodropper', {
        acceptedFiles: 'video/mp4',
        createImageThumbnails: false,
        previewTemplate: '<div></div>',
        clickable: '#videouploadbutton',
        addRemoveLinks: true,
        paramName: 'file',
        chunking: true,
        forceChunking: true,
        url: '/upload/video-files',
        maxFilesize: 4096, // megabytes
        chunkSize: 1000000, // bytes
      }
      );
      videodropper.on('sending', function (file, xhr, formData) {
        formData.append('ospfilename', videofilename + '.mp4');
      });
      videodropper.on("uploadprogress", function (file, progress, bytesSent) {
        progress = Math.floor(bytesSent / file.size * 100);
        $('#videouploadprogress').width(progress + "%");
        document.getElementById('videouploadprogress').innerHTML = document.getElementById('videouploadprogress').innerHTML = '<b>' + progress + '%</b>';
      });
      videodropper.on("addedfile", function (file) {
        document.getElementById('videoFilename').value = videofilename + '.mp4';
        document.getElementById('videoFilenameDisplay').value = file.name;
        videouploadsocket();
      });
      videodropper.on("success", function (file) {
        $('#uploadbutton').removeAttr('disabled');
        document.getElementById('videouploadstatus').innerHTML = document.getElementById('videouploadstatus').innerHTML = '<i class="fas fa-check">';
          document.getElementById('videouploadprogress').innerHTML = document.getElementById('videouploadprogress').innerHTML = 'Upload complete';
        });
        videodropper.on('error', function (file, response) {
          document.getElementById('videouploadstatus').innerHTML = document.getElementById('videouploadstatus').innerHTML = '<i class="fas fa-exclamation-triangle"></i>';
          document.getElementById('videoFilenameDisplay').value = 'Error: ' + response
        });
      </script>
      
      <script>
        $(document).ready(function () {
          $('.toast').toast('show');
          document.getElementById("uploadform").reset();
        });
      </script>
      
      <script>
        var lazyLoadInstance = new LazyLoad({
          elements_selector: ".lazy"
        });
      </script>

      <script>
        $(document).ready(function()
          {
              $(".gif").hover(
                  function()
                  {
                    var src = $(this).attr("src");
                    $(this).attr("src", src.replace(/\.png$/i, ".gif"));
                  },
                  function()
                  {
                    var src = $(this).attr("src");
                    $(this).attr("src", src.replace(/\.gif$/i, ".png"));
                  });
          });
      </script>
      
      <script>
        function canceluploads() {
          videodropper.removeAllFiles(true);
          thumbnaildropper.removeAllFiles(true);
          document.getElementById("uploadform").reset();
          document.getElementById('videouploadstatus').innerHTML = "";
          document.getElementById('videouploadprogress').innerHTML = document.getElementById('thumbnailuploadprogress').innerHTML = "";
          document.getElementById('thumbnailuploadstatus').innerHTML = "";
          document.getElementById('thumbnailuploadprogress').innerHTML = document.getElementById('thumbnailuploadprogress').innerHTML = "";
          $('#uploadbutton').attr('disabled');
          $('#thumbnailuploadprogress').width("0%");
          $('#videouploadprogress').width("0%");
        }
      </script>
      <script>
        $('.notificationDropdownMenu').click(function(e) {
          e.stopPropagation();
        });
        
        var notificationCountMobile = document.getElementById("notificationCountMobile");
        var notificationCountNav = document.getElementById("notificationCountNav");
        var notificationCountMenu = document.getElementById("notificationCountMenu");
        var notificationCount = {{notifications|count}};
        
        function clearNotification(notificationID) {
          var conn_options = {
            'sync disconnect on unload': true
          };
          var socket = io();
          
          var notification = document.getElementById('notification-' + notificationID);
          notification.parentNode.removeChild(notification);
          
          var newCount = notificationCount - 1;
          if (newCount <= 0) {
            var emptyNotificationBar = document.getElementById("notification-empty");
            
            notificationCountMobile.style.display = "none";
            notificationCountNav.style.display = "none";
            emptyNotificationBar.style.display = "block";
            newCount = 0;
          }
          
          notificationCountMobile.innerText = newCount;
          notificationCountNav.innerText = newCount;
          notificationCountMenu.innerText = newCount;
          notificationCount = notificationCount - 1;
          
          socket.emit('markNotificationAsRead', { data: notificationID });
        }
        
        function clearAllNotifications() {
          var ids = $('.notificationBody .notification-box').map(function(){
            return $(this).attr('id');
          }).get();
          ids.forEach(function (item, index) {
            if (item != 'notification-empty') {
              item = item.replace('notification-','');
              clearNotification(item);
            }
          });
        }
        
      </script>
      
    </body>
    
    
    </html>